<template>
	<view >
		<view v-for="(data, index) in list" :key="index" class="item">
			<view v-if="data.remark != 1">
				<view class="top">
					<view class="reply" @click="showComment(data)">回复</view>
					<image :src="data.context.levelOneComment.linkUserAccountHead" class="avatar" />
					<view class="info">
						<view class="name">{{data.context.levelTwoComment.myName}}</view>
						<view class="time">{{data.createTime}}</view>
					</view>
				</view>
				<view class="content">
				回复<text class="name">@{{data.context.levelTwoComment.hisName}}</text> :	{{data.context.levelTwoComment.commentContent}}
				</view>
			</view>
			<view v-if="data.remark == 1">
				<view class="top">
					<view class="reply" @click="showComment(data)">回复</view>
					<image :src="data.context.levelOneComment.linkUserAccountHead" class="avatar" />
					<view class="info">
						<view class="name">{{data.context.levelOneComment.linkUserName}}</view>
						<view class="time">{{data.createTime}}</view>
					</view>
				</view>
				<view class="content">
					 {{data.context.levelOneComment.commentContent}}
				</view>
				<view class="reply-content">
					<view class="flex" @click="goto(data)">
						<image :src="data.context.itemImage" class="img">
						</image>
						<view class="info">
							<view class="title">{{data.context.itemTitle}}</view>
							<view class="desc">
								# {{data|cardType}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="data.context.levelTwoComment" class="reply-content">
				<view class="content" v-if="data.remark == 3">
					<text class="name">@{{data.context.levelTwoCommentEd.myName}}</text> 回复<text class="name">@{{data.context.levelTwoCommentEd.hisName}}</text>：{{data.context.levelTwoCommentEd.commentContent}}
				</view>
				<view class="content" v-if="data.remark != 3">
					<text class="name">@{{data.context.levelOneComment.linkUserName}}</text>
					：{{data.context.levelOneComment.commentContent}}
				</view>

				<view class="flex" @click="goto(data)">
					<image :src="data.context.itemImage" class="img">
					</image>
					<view class="info">
						<view class="title">{{data.context.itemTitle}}</view>
						<view class="desc">
							# {{data|cardType}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no-data" v-if="list.length===0">
			<image src="https://www.innovationgloble.com/wxs/img/wx/no-data.png" mode="aspectFit"></image>
			<view class="no-data-text">暂无评论</view>
		</view>
		<view class="sysBottomShow" style="background-color: rgba(245, 245, 245, 1);" v-if="isLastPage&&list.length>2">
			我是有底线的
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup_box">
				<view class="popup_box_title">
					提示
				</view>
				<view class="popup_box_content">
					<image src="../../static/gotopc.png" mode=""></image>
					<view class="popup_box_content_text">
						请登录PC端查看
					</view>
					<view class="popup_box_content_url">
						https://www.innovationgloble.com
					</view>
				</view>
				<view class="popup_box_btn" @click="closePopup">
					确定
				</view>
			</view>
		</uni-popup>
		<msgInput ref='msgInputRef' :placeholder="ygcPlaceholder" @pubComment="pubComment"></msgInput>
	</view>
</template>

<script>
	
	import msgInput from '@/components/msg-input.vue';
	export default {
		data() {
			return {
				list: [],
				pageNum: 1,
				isLastPage: false,
				comment_data: {},
				baseUrl: this.$baseUrl,
				ygcPlaceholder: ''
			}
		},
		components: {
			msgInput
		},
		filters: {
			cardType: (v) => {
				// console.log(typeof v)
				if (typeof v.context == 'object') {
					if (v.context.itemType == 'project') {
						return '项目'
					} else if (v.context.itemType == 'demand') {
						return '需求'
					} else if (v.context.itemType == 'service') {
						return '服务'
					} else if (v.context.itemType == 'talent') {
						return '专家'
					} else if (v.context.itemType == 'activity') {
						return '活动'
					}
				}
			}
		},
		onLoad() {
			this.loadList();
		},
		computed: {
			
		},
		onPullDownRefresh() {
			this.isLastPage = false
			this.list = []
			this.pageNum = 1
			this.loadList();
		},
		onReachBottom() {
			if (!this.isLastPage) {
				this.pageNum += 1;
				this.loadList()
			}

		},
		methods: {
			showComment(v) {
				
				if(v.context.levelTwoComment){
					this.comment_data = {
						linkCommentId: v.context.levelTwoComment.linkCommentId,
						linkTwoCommentId: v.context.levelTwoComment.levelTwoCommentId,
						whoCommentId: v.context.levelTwoComment.linkUserId,
						hisName: v.context.levelTwoComment.myName,
						type: v.context.levelTwoComment.type
					}
					this.ygcPlaceholder = '@' + v.context.levelTwoComment.myName
				}else{
					this.comment_data = {
						linkCommentId: v.context.levelOneComment.levelOneCommentId,
						whoCommentId: v.context.levelOneComment.linkUserId,
						hisName: v.context.levelOneComment.linkUserName,
						type: v.context.levelOneComment.type
					}
					this.ygcPlaceholder = '@' + v.context.levelOneComment.linkUserName
				}
				this.$refs.msgInputRef.focus();
			},
			pubComment(data) {

				this.comment_data.commentContent = data
				this.$request.post({
					url: 'LevelTwoComment/insertLevelTwoComment',
					data: this.comment_data,
				}).then(() => {
					// this.$refs.ygcComment.toggleMask();
					uni.showToast({
						title: "回复成功",
						icon: 'none'
					})
					// this.list =[];
					// this.loadList();
				})
			},
			loadList() {
				uni.showLoading({
					title: '加载中'
				});
				this.$request.get({
					url: 'sysMessage/list',
					data: {
						pageSize: 20,
						pageNum: this.pageNum,
						messageType: 3
					}
				}).then(res => {
					uni.hideLoading()
					res.list = res.list.map(d => {
						return {
							...d,
							context: JSON.parse(d.context)
						}
					});
					this.isLastPage = res.isLastPage
					this.list = [...this.list, ...res.list]
					uni.stopPullDownRefresh();
				})

			},
			goto(v){
				if(v.context.itemType=='project'){
					uni.navigateTo({
						url:'../../pages/project-detail/project-detail?scene='+v.context.itemId
					})
				}else if(v.context.itemType=='activity'){
					uni.navigateTo({
						url:'../../pages/activity-detail/activity-detail?scene='+v.context.itemId
					})
				}else if(v.context.itemType=='talent'){
					uni.navigateTo({
						url:'../../pages/expert-detail/expert-detail?scene='+v.context.itemId
					})
				}else{
					this.openPopup()
				}
				
			},
			openPopup() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;

		.item {
			padding: 32upx;
			box-sizing: border-box;

			.top {
				display: flex;
				flex-direction: row;
				position: relative;

				.reply {
					position: absolute;
					right: 32upx;
					top: 0upx;
					width: 110upx;
					height: 50upx;
					border-radius: 25upx;
					border: 1upx solid rgba(148, 190, 252, 1);
					text-align: center;
					color: #196DEC;
					line-height: 50upx;
				}

				.avatar {
					width: 84upx;
					height: 84upx;
					border-radius: 50%;
					background-color: #FAFAFA;
					margin-right: 20upx;
				}

				.info {
					margin-left: 10upx;

					.name {
						font-size: 30upx;
						color: #444444;
						font-weight: bold;
					}

					.time {
						font-size: 26upx;
						color: #A3A3A3;
					}
				}
			}

			.content {
				margin-bottom: 20upx;
			}

			.reply-content {
				padding: 20upx 28upx;
				box-sizing: border-box;
				background-color: #FAFAFA;
				min-height: 155upx;

				.flex {
					display: flex;
					flex-direction: row;
					align-items: center;

					.img {
						width: 154upx;
						height: 110upx;
						background-color: #E1E1E1;
					}

					.info {
						margin-left: 16upx;

						.title {
							font-size: 30upx;
							color: #444444;
						}

						.desc {
							font-size: 26upx;
							color: #6B6B6B;
						}
					}
				}


			}
		}

		.no-data {
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			padding-bottom: 300upx;
			flex-flow: column;

			image {
				width: 240upx;
				height: 166upx;
			}

			.no-data-text {
				color: #666666;
				font-size: 26rpx;
				margin: 30rpx 0;
			}
		}
		.popup_box {
			width: 540upx;
			height: 622upx;
			background: rgba(255, 255, 255, 1);
			border-radius: 24upx;
		
			.popup_box_title {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 83upx;
				color: #030303;
				font-weight: bold;
				border-bottom: 1px solid #E5E5E5;
			}
		
			.popup_box_content {
				text-align: center;
		
				image {
					width: 278upx;
					height: 199upx;
					margin: 49upx 0 38upx;
				}
		
				.popup_box_content_text {
					font-size: 24upx;
					color: #6F6F6F;
				}
		
				.popup_box_content_url {
					color: #2A7DFA;
					font-size: 26upx;
					text-decoration: underline;
				}
			}
		
			.popup_box_btn {
				width: 191upx;
				height: 66upx;
				background: rgba(42, 125, 250, 1);
				border-radius: 33upx;
				// display: inline-block;	
				// margin: 0 auto;
				color: #FFFFFF;
				margin: 56upx auto 0;
				font-size: 32upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.name{
		color: #196DEC;
		padding: 0 10upx;
	}
</style>
